Obsidian Draw.io —— 在笔记里画交互式图表
wuxl obsidian学习教程 2026年6月16日 09:52
插件地址：https://github.com/somesanity/draw-io-obsidian
最新版本：v3.1.1（2026 年 6 月）
许可证：GPL-3.0
Obsidian 虽然 Markdown 写得爽，但一碰到画架构图、流程图、ER 图就犯难。Mermaid 能顶一部分，可有些图它的表现力确实差点意思。Draw.io 插件就是来解决这个痛点的——把一个完整的 draw.io 编辑器塞进 Obsidian，而且完全离线跑。
基础介绍
这个插件由 somesanity 开发，核心原理一句话： 在本地起一个 Web 服务器，把 draw.io 的 Web 应用直接跑在你机器上 。不需要联网，不经过任何第三方服务器，隐私安全拉满。
能干什么？
- 画各种图 ：流程图、架构图、UML、ER 图、网络拓扑……draw.io 能画的它都能画
- 形状绑定笔记 ：右键任何一个图形，给它挂一个 Obsidian 笔记链接，阅读模式下点击就能跳转
- 形状绑定外部链接 ：挂 URL 也行，点击直接打开网页
- Markdown 片段嵌入 ：在图形里嵌入 Obsidian 渲染的 Markdown，DataviewJS 脚本都能塞进去
- 原生支持 Mermaid 和 LaTeX ：draw.io 本身就支持，所以图表里能嵌数学公式
- 支持 Obsidian Canvas ：可以把 diagram 扔到白板上，链接能力依然保留
- 完全离线 ：装好之后断网照样用
文件格式
图表文件后缀是 .drawio.svg 。这玩意儿本质上还是个标准 SVG 文件，可以用任何图片查看器打开。但 .drawio 这一截是插件的识别标记——你把 .drawio 删了（比如重命名成 .svg ），插件就不认了，没办法再编辑。
✔ diagram.drawio.svg ← 能编辑、能交互 ✘ diagram.svg ← 只能看图，不能编辑
一个小限制
交互功能（点击跳转、Markdown 片段渲染等） 只在阅读模式下生效 ，编辑模式下就只是个普通图片。这一点心里有数就好。
使用场景
场景一：技术笔记里的架构图
写技术文档时经常需要画架构图、时序图、部署图。以前得开个外部 draw.io，画完导出图片再拖进 Obsidian，改了还得重新导出。现在直接在 Obsidian 里完成闭环，改完即存。
场景二：知识图谱 + 笔记联动
你可以在图里画一个"微服务架构"，给每个服务节点绑上对应的笔记。阅读模式下点哪个服务就跳到哪篇笔记，相当于把图变成了一个可视化的笔记导航页。
场景三：Canvas 白板上的拼图
Obsidian Canvas 本身就是个自由布局的白板，把 draw.io 图表扔进去，再配上笔记卡片、图片，做项目总览、学习地图都非常直观。
场景四：Dataview 动态数据嵌入图表
通过 Markdown 片段功能，你可以把 DataviewJS 查询结果嵌进图表。比如画一个项目进度图，上面动态显示待办数量——图表活了。
场景五：数学公式 + 图示讲解
LaTeX 和 Mermaid 原生支持，画贝叶斯网络、决策树之类的图表时，节点里直接写数学公式，不用切来切去。
基本使用
安装
方式一：社区插件市场（推荐）
Obsidian → 设置 → 第三方插件 → 浏览 → 搜 draw.io → 安装并启用。
启用之后还有关键一步 ：进插件设置页，滑到底，点下载按钮把 draw.io 客户端拉到本地。这一步不做，编辑器起不来。
方式二：手动安装
从 GitHub Releases 下载 main.js 、 manifest.json 、 styles.css 三个文件，放到下面这个目录：
.obsidian/plugins/draw-io/
然后启插件，同样去设置页下载 draw.io 客户端。
新建图表
两种方式：
- 命令面板 ：
Ctrl/Cmd + P，搜draw.io，选「新建图表」相关的命令 - 快捷键 ：在 Obsidian 快捷键设置里给 draw.io 命令绑一个顺手的组合键
执行后会弹出 draw.io 编辑界面，画完保存，一个 .drawio.svg 文件就出现在你的 vault 里了。
编辑已有图表
三种姿势：
- 右键菜单 ：在阅读模式右键图表链接 → 选「Edit draw.io Diagram」
- 快捷键 ：在编辑模式下把光标放在图表链接上，按你绑的快捷键
- 命令面板 ：光标放链接上 →
Ctrl/Cmd + P→ 执行编辑命令
在笔记里引用图表
就跟引用普通图片一样：
阅读模式下它显示为图表，还能交互；编辑模式下就是个链接。
进阶使用
形状绑定笔记链接
这是这个插件最核心的进阶玩法。操作很简单：
- 在 draw.io 编辑器里选中一个图形
- 右键 → 选
Add link - 输入 Obsidian 笔记的内部链接（比如
[某篇笔记](/wiki/某篇笔记)），或者外部 URL - 保存退出
在阅读模式下，点击那个图形，直接跳到对应笔记或打开网页。一张图就能做成"可视化目录"。
Markdown 片段（Markdown Fragments）
这功能允许你在图形元素里嵌入 Obsidian 能渲染的 Markdown 内容。用法如下：
- 在编辑器里选中一个元素
- 右键 →
Add data... - 按命名规则添加属性：
md-1、md-2、md-3…… - 把你想显示的 Markdown 文本填进去
可以嵌入的东西包括但不限于：
- 普通 Markdown 文本
- DataviewJS 查询（动态数据！）
- Callout 块
- 其他插件渲染的内容
⚠️ 跟链接一样，这个交互效果只在阅读模式下生效。
Mermaid 和 LaTeX 混排
draw.io 编辑器原生支持 Mermaid 代码和 LaTeX 公式。不需要插件额外做什么，直接在 draw.io 里插入就行。如果你画的是算法流程图，节点里丢个时间复杂度公式 ，逼格拉满。
Canvas 联动
把 .drawio.svg 文件拖到 Canvas 上，跟笔记卡片、图片、网页嵌入混排。图表里的链接和 Markdown 片段在 Canvas 阅读模式下同样有效。
文件管理小贴士
因为图表文件就是 SVG，你可以用任何图片查看器预览，用 Git 做版本对比也很直观（SVG 是纯文本）。但注意别手贱重命名把 .drawio 这截去掉——去掉了就再也编辑不了了，除非你改回来。
小结
Draw.io 插件属于" 装上之后工作流质感直接提升一个档次 "的那种工具。核心优势：
- 全离线、全隐私 ——本地跑 Web 服务器，数据不出你电脑
- 图表跟笔记深度绑定 ——形状链笔记、Markdown 片段嵌入、Canvas 联动，图不再是孤立文件
- 编辑体验闭环 ——新建、编辑、引用全在 Obsidian 里完成，不用再切外部工具
要说缺点，就一个：交互功能 只支持阅读模式 ，编辑模式下图表就是个静态图。好在不影响核心画图体验，瑕不掩瑜。
如果你是那种笔记里经常需要画图的技术人，这插件基本属于必装级别的——把 draw.io 这种重型武器无缝融入 Obsidian，用了就回不去。
obsidian-plugin-教程 · 目录
继续滑动看下一个
obsidian学习教程
向上滑动看下一个